<!DOCTYPE html>
<style>
body:not(.ready) #content { color: red; }
</style>
<script>
onload = function() {
   var sr = document.getElementById('host').attachShadow({mode: 'open'});
   var style = document.createElement('style');
   style.innerHTML = "span { color: red; }";

   // Finish style recalc.
   document.body.offsetLeft;

   // Invoke StyleInvalidator.
   document.body.className = 'ready';

   // Add a new stylesheet to pending stylesheets.
   sr.appendChild(style);

   // Finish adding all pending stylesheets via ensureUpdateRuleFeatureSet.
   // c.f. Element::attributeChanged()
   style.setAttribute('test', 'test');
}
</script>
<body>
  <div id="target">
    <div>
      <div id="content">
        Not red.
      </div>
    </div>
  </div>
  <div id="host">
  </div>
</body>
